<script setup>
import { ref, toRefs } from 'vue'

const obj = ref({
  name: 'zs',
  age: 23,
})

// 结构的一个注意事项!!! 响应式数据一旦被解构了, 结构出来的数据就会丢失响应式特性
// 分析: vue3 响应式原理是????  proxy 代理的是整个对象, 让整个对象具有响应式特性
// 解决方案: toRefs => 在解构的同时 包了ref 又具备了响应式
const { name, age } = toRefs(obj.value)

</script>

<template>
  <div>{{ obj }}</div>
  <button @click="name = 'ls'">改名字</button>
</template>
